<template>
  <ex-dialog
    width="600px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"  label-width="auto" class="demo-ruleForm" >
      <el-form-item label="是否启用CoCo转赠：" prop="cocoDonationType" :key="1">
          <el-switch
            v-model="ruleForm.cocoDonationType"
            active-value="2"
            inactive-value="1"
            active-text="是"
            inactive-text="否"
          >
          </el-switch>
        </el-form-item>
      <el-form-item label="CoCo转赠费率：" prop="cocoFee" :key="2">
				<el-input type="text" v-model="ruleForm.cocoFee" autocomplete="off" placeholder="请输入CoCo转赠费率"  >
          <template slot="append">%</template>
        </el-input>
			</el-form-item>
      <el-form-item label="收取类型：" prop="cocoFeeType">
        <el-radio-group v-model="ruleForm.cocoFeeType">
          <el-radio label="1">CoCo</el-radio>
          <el-radio label="2">现金</el-radio>
        </el-radio-group>
			</el-form-item>
      <!-- 椰分 -->
      <el-form-item label="是否启用椰分转赠：" prop="yfDonationType" :key="3">
          <el-switch
            v-model="ruleForm.yfDonationType"
            active-value="2"
            inactive-value="1"
            inactive-text="否"
            active-text="是"
          >
          </el-switch>
        </el-form-item>
      <el-form-item label="椰分转赠费率：" prop="yfFee" :key="4">
				<el-input type="text" v-model="ruleForm.yfFee" autocomplete="off" placeholder="请输入椰分转赠费率">
          <template slot="append">%</template>
        </el-input>
			</el-form-item>
      <el-form-item label="收取类型：" prop="yfFeeType" :key="5">
        <el-radio-group v-model="ruleForm.yfFeeType">
          <el-radio label="1">椰分</el-radio>
          <el-radio label="2">现金</el-radio>
        </el-radio-group>
			</el-form-item>
		</el-form>
    <div slot="footer">
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认提交</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
    </div>
  </ex-dialog>
</template>
<script>
// api
import {
  integralDonationConfig,
  integralDonationConfigGetInfo,
 } from "@/api/integralOperation/integralTransferDetail";
export default {
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    var checkSellPrice = (rule, value, callback) => { //销售价格校验
        let regNumber = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/; //大于0的数值且最多保留两位小数的数值
        if (regNumber.test(value) == false || value == '0.00' || value == '0.0') {
          return callback(new Error('请填写大于0且小于等于100(最多2位小数)'));
        } else {
          return callback()
        }
      };
    return {
      loading: false,
      title: '积分转赠费率配置：(用于前端转赠收取手续费)',
      roleList: [],
			ruleForm: {
				cocoDonationType: '2',//CoCo转赠
				cocoFee: '',//CoCo转赠费率
        cocoFeeType: '1',//	CoCo收取类型
        yfDonationType: '2',//椰分转赠
				yfFee: '',//椰分转赠费率
        yfFeeType: '1',//	椰分收取类型
      },
      flags: false,
			rules: {
        cocoDonationType:   [
          { required: true,message: '请选择CoCo转赠',trigger: 'change' }
        ],
        cocoFee: [
          { required: true,message: '请输入CoCo转赠费率',trigger: 'blur' },
          { validator: checkSellPrice,trigger: 'blur'},
        ],
        cocoFeeType: [
          { required: true,message: '请选择CoCo收取类型',trigger: 'change' }
        ],
        yfDonationType:   [
          { required: true,message: '请选择椰分转赠',trigger: 'change' }
        ],
        yfFee: [
          { required: true,message: '请输入椰分转赠费率',trigger: 'blur' },
          { validator: checkSellPrice,trigger: 'blur'},
        ],
        yfFeeType: [
          { required: true,message: '请选择椰分收取类型',trigger: 'change' }
        ],
      },
    }
  },
  computed: {
   
  },
  created() {
     this.getDetail()
	},
  methods: {
    //活动详情
    getDetail(){
      integralDonationConfigGetInfo().then(res => {
        this.ruleForm = res.result
        console.log(this.ruleForm)
      })
    },
    //新建子账号
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          this.loading = true
           var data = {
              ...this.ruleForm
            }
            integralDonationConfig(data).then(res => {
              this.handleSuccess("保存成功!")
              setTimeout(() => {
                this.loading = false
              }, 1000);
            }).catch(()=>{
               this.loading = false
            }).finally(() => {

            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1000,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    // border: none !important;
		padding: 10px 0 !important;
    .el-button{
      margin: unset;
      &:first-child{
        margin-right: 20px;
      }
    }
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important; 
  }
}
::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  ::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
  }
.el-input{
  width: 300px;
}
</style>